/**
* 系统管理 用户管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form ref="formInline" :inline="true" :model="formInline" class="user-search">
      <el-form-item label="登录账号">
        <el-input v-model="formInline.serchUser.username" placeholder="输入登录账号" size="small"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="formInline.serchUser.nickname" placeholder="输入用户昵称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="formInline.serchUser.status" placeholder="请选择" size="small">
          <el-option defalut label="全部" value="1"></el-option>
          <el-option label="正常" value="2"></el-option>
          <el-option label="已锁定" value="3"></el-option>
          <el-option label="作废" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="search">查询</el-button>
        <el-button icon="el-icon-plus" size="small" type="primary" @click="resetFormRef">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table v-loading="loading" :data="userData" border element-loading-text="拼命加载中" highlight-current-row
              size="small" style="width: 100%;" @selection-change="selectChange">
      <el-table-column align="center" label="账号" prop="username" sortable width="120">
      </el-table-column>
      <el-table-column align="center" label="用户昵称" prop="nickname" sortable width="120">
      </el-table-column>
      <el-table-column align="center" label="角色" min-width="50" prop="description" sortable>
      </el-table-column>
      <el-table-column align="center" label="状态" min-width="50" prop="status" sortable>
      </el-table-column>
      <el-table-column align="center" label="邮件地址" min-width="120" prop="email" sortable>
      </el-table-column>
      <el-table-column align="center" label="修改时间" min-width="120" prop="updateTime" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.updateTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">锁定</el-button>
          <el-button size="mini" type="success" @click="resetpwd(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="resetForm">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 数据权限 -->
  </div>
</template>

<script>
// 导入请求方法
import Pagination from '../../components/Pagination'
import {users} from "../../api/sysconfigMG";

export default {
  data: function () {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示

      // 选择数据
      selectdata: [],
      // 请求数据参数
      formInline: {
        pageNum: 1,
        pageSize: 10,
        pageCount: 10,
        serchUser: {
          username: '',
          nickname: '',
          status: ''
        }
      },

      //用户数据
      userData: [],
      // 数据权限
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        pageNum: 1,
        pageSize: 10,
        pageCount: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据方法
    getdata(params) {
      this.loading = true
      users(params).then(res => {
        this.loading = false
        console.log(res)

        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.userData = res.result.list

          console.log(this.userData)
          // 分页赋值
          this.pageparm.pageNum = this.formInline.pageNum
          this.pageparm.pageSize = this.formInline.pageSize
          this.pageparm.pageCount = res.pageCount
        }
      })

    },

    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.pageNum
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
    search() {
      this.getdata(this.formInline)
    },
    // 修改type
    editType: function (index, row) {
      this.loading = true
      let parm = {
        lock: '',
        userId: '',
        token: localStorage.getItem('token')
      }
      parm.userId = row.userId
      let lock = row.isLock
      if (lock == 'N') {
        parm.lock = 'Y'
      } else {
        parm.lock = 'N'
      }
      // 修改状态
      userLock(parm).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.formInline)
        }
      })
    },


    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.unitparm.deptId = data.id
        this.unitparm.deptName = data.name
        //交叉点击节点
      } else {
      }
    },
    //重置按钮
    resetFormRef() {

      this.formInline.serchUser.nickname = '';
      this.formInline.serchUser.username = '';
      this.formInline.serchUser.status = '';
      this.getdata(this.formInline)
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>

